<link rel="stylesheet" href="css/lonix/lonix.downlist.css" />
<link rel="stylesheet" href="css/lonix/dropdown.min.css" />
<link rel="stylesheet" href="css/lonix/transition.min.css" />
<style>
    #panel-config-frame {
        position: absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        background:#eee;
    }
    #panel-config-frame .top-menu {
        position:absolute;
        top:0;
        left:0;
        right:0;
        height:30px;
        border-bottom:1px solid #ccc;
    }
    #panel-config-frame .body-content {
        position:absolute;
        top:31px;
        bottom:30px;
        left:0;right:0;
        overflow:auto;
        padding:15px;
    }
    #panel-config-frame .bottom-footer {
        position:absolute;
        left:0;
        right:200px;
        bottom:0;
        height:30px;
        border-top:1px solid #ccc;
    }
    #panel-config-frame .slide-menu-button {
        top:0;
        left:0;
        width:30px;
        height:30px;
        float:left;
    }
    #panel-config-frame .slide-menu-button a {
        display:block;
        cursor:default;
        width:30px;
        height:30px;
        text-align:center;
        line-height:30px;
        font-size:24px;
        border-right:1px solid #ccc;
        user-select:none;
    }
    #panel-config-frame .slide-menu-button a:hover {
        background:#c1c1c1;
        text-decoration: none;
    }
    #panel-config-frame .slide-menu {
        position:absolute;
        top:31px;
        left:0;
        width:150px;
        bottom:0;
        display:none;
        background:#fff;
        border-right:1px solid #ccc;
        overflow: auto;
    }
    #panel-config-frame .properties-menu {
        display: block;
        position:absolute;
        top:31px;
        right:0;
        width:200px;
        bottom:0;
        background:#fff;
        font-size:12px;
        border-left:1px solid #ccc;
    }
    #panel-config-frame .resolution-button {
        height:30px;
        float:left;
        border-right:1px solid #ccc;
    }
    #panel-config-frame .resolution-button a {
        display:block;
        height:30px;
        padding:0 10px;
        font-size:12px;
        text-align:center;
        line-height:30px;
    }
    #panel-config-frame .resolution-button a:hover {
        background:#ccc;
        text-decoration: none;
    }
    #panel-config-frame .cur-path {
        float:left;
        height:30px;
        line-height:30px;
        padding:0 15px;
        border-right:1px solid #ccc;
    }
    #panel-config-frame .cur-path ul {
        margin:0;
        padding:0;
    }
    #panel-config-frame .cur-path li {
        margin:0;
        padding:0;
        float:left;
        font-size:12px;
        list-style:none;
    }
    #panel-config-frame .cur-path li:after {
        content:'＞';
        margin:0 5px;
    }
    #panel-config-frame .cur-path li:last-child:after {
        content:'';
    }
    #panel-config-frame .work-content {
        position: relative;
        background:#fff;
        box-shadow: 0 0 10px #666;
    }
    #panel-config-frame .scale-bl {
        float:right;
    }
    #panel-config-frame .scale-bl a {
        height:30px;
        font-size:12px;
        padding:0 10px;
        line-height:30px;
        text-align:center;
        border-right:1px solid #ccc;
    }
    #panel-config-frame .option-menu {
        display:inline-block;
        float:left;
        border-right:1px solid #ccc;
    }
    #panel-config-frame #add-compont {
        height:30px;
        line-height:30px;
        text-align:center;
        padding:0 5px;
        font-size:14px;
    }
    #panel-config-frame #add-compont:after {
        content: '▼';
        font-size:12px;
    }
    #panel-config-frame #add-compont:hover {
        background:#ccc;
        text-decoration: none;
    }
    #panel-config-frame #add-compont .item {
        font-size:14px;
        padding:10px 15px !important;
    }
    #panel-config-frame .work-item {
        overflow: hidden;
    }
    #panel-config-frame .work-item.cur {
        border-color:red !important;
    }
    #panel-config-frame .properties-menu-button {
        position:absolute;
        top:0;
        right:0;
        width:200px;
        height:30px;
        float:right;
        background:#eee;
        border-left:1px solid #ccc;
    }
    #panel-config-frame .properties-menu-button a {
        display:block;
        cursor:default;
        width:200px;
        height:30px;
        text-align:center;
        line-height:30px;
        font-size:14px;
        user-select:none;
    }
    #panel-config-frame .properties-menu-button a:hover {
        background:#ccc;
        text-decoration: none;
    }
    #panel-config-frame .info-title {
        color:#666;
        font-size:12px;
        padding:5px 8px;
        background:#eee;
    }
    #panel-config-frame .info-title:before {
        content:'◈ '
    }
    #panel-config-frame .info-content table {
        border-collapse:collapse;
    }
    #panel-config-frame .info-content table td, #panel-config-frame .info-content table th {
        text-align: center;
        border-bottom:1px solid #ccc;
    }
    #panel-config-frame .delete-work-item-button {
        width:50px;
        height:30px;
        float:left;
        background:#eee;
        border-right:1px solid #ccc;
    }
    #panel-config-frame .delete-work-item-button a {
        display:block;
        cursor:default;
        width:50px;
        height:30px;
        text-align:center;
        line-height:30px;
        font-size:14px;
        user-select:none;
    }
    #panel-config-frame .delete-work-item-button a:hover {
        background:#ccc;
        text-decoration: none;
    }
    #panel-config-frame .save-cancel-button {
        position: absolute;
        top:0;
        right:200px;
    }
    #panel-config-frame .save-cancel-button a {
        display: inline-block;
        width:50px;
        height:30px;
        line-height: 30px;
        text-align:center;
        user-select: none;
        font-size:14px;
        float: left;
        background: #eeeeee;
        border-right:1px solid #cccccc;
    }
    #panel-config-frame .save-cancel-button a:hover {
        background: #cccccc;
        text-decoration: none;
    }
    #panel-config-frame .layout-user-list, #panel-config-frame .layout-programme {
        height:30px;
        line-height:30px;
        float: left;
        padding:0 10px;
    }
    #panel-config-frame .layout-user-list select,#panel-config-frame .layout-programme select {
        margin: 4px auto;
    }
    #panel-config-frame .layout-name {
        float: left;
        height:30px;
        line-height:30px;
        padding:0 8px;
    }
    #panel-config-frame .layout-name input[type=text] {
        height:20px;
    }
    #panel-config-frame input.panel-title {
        border:none;
        padding:5px;
        border-bottom:1px solid #ccc;
        margin:0;
        margin:5px;
    }
</style>
<section id="panel-config-frame">
    <div class="top-menu">
        <div class="slide-menu-button">
            <a onclick="openSlideMenu(this, event)">≡</a>
        </div>

        <div class="cur-path">
            <ul>
                <li>点我选择工作站</li>
            </ul>
        </div>
        <input type="hidden" id="wsn-id" name="wsn-id" />
        <div class="lonix float-frame float" id="wsn-tree">
            <div class="lonix float-header">
                <input type="text" class="lonix search-input" maxlength="15" placeholder="搜索" />
            </div>
            <div class="lonix float-body">
                <ul class="ztree" id="wsn-tree-ul"></ul>
            </div>
            <div class="lonix float-prompt"></div>
            <div class="lonix float-footer">
                <div class="lonix button-group">
                    <button class="lonix button primary">确认</button>
                </div>
            </div>
        </div>
        <div class="resolution-button">
            <a onclick="openResolution(this, event)">1920*1080</a>
        </div>
        <div class="option-menu">
            <div class="ui inline compact top right pointing dropdown" id="add-compont">
                添加
                <div class="menuT">
                    <!--
                        0.容器
                        1.控件
                        *.组件和控件无法再挂载子元素，容器可以
                    -->
                    <div class="ui left pointing link dropdown item">
                        <i class="dropdown icon"></i>
                        容器
                        <div class="menuT">
                            <div class="item" data-value="1" data-type="Lonix.BasePanel">空容器</div>
                            <div class="item" data-value="1" data-type="Lonix.MultiTab">TAB容器</div>
                            <!-- TAB容器只能添加TAB-ITEM -->
                        </div>
                    </div>
                    <div class="ui left pointing link dropdown item">
                        <i class="dropdown icon"></i>
                        控件
                        <div class="menuT">
                            <div class="item" data-value="1" data-type="Lonix.RoadGate">道闸</div>
                            <div class="item" data-value="1" data-type="Lonix.MonitorCenter">监控控件</div>
                            <div class="item" data-value="1" data-type="Lonix.CarInformation">图片控件</div>
                            <div class="item" data-value="1" data-type="Lonix.ControlPanel">菜单栏</div>
                            <div class="item" data-value="1" data-type="Lonix.OperatorInfo">操作员信息</div>
                            <div class="item" data-value="1" data-type="Lonix.RemainingUnit">余位统计</div>
                            <div class="item" data-value="1" data-type="Lonix.DetailsOfEntryAndExit">结算明细清单</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="delete-work-item-button">
            <a onclick="deleteWorkItem()">删除</a>
        </div>
        <div class="layout-user-list">
            <select onchange="onUserSelect(this, event)">
                <option value="-2">请先选择工作站</option>
            </select>
        </div>
        <div class="layout-programme">
            <select onchange="onPlanSelect(this, event)">
                <option value="-2">请先选择工作站</option>
            </select>
        </div>
        <div class="layout-name">
            <label>方案名称：</label><input type="text" />
        </div>
        <div class="save-cancel-button">
            <a onclick="saveThisLayout()" style="background: #0199FF; color:#ffffff;">保存</a>
            <a onclick="deleteLayoutMainById()" style="background: darkred; color:#ffffff;width:70px;">删除方案</a>
            <a id="scale-button" onclick="scalePanel(this)">缩小</a>
        </div>
        <div class="properties-menu-button">
            <a onclick="openLayoutPropertyPanel()">属性面板</a>
        </div>
    </div>
    <div class="body-content">
        <div class="work-content"></div>
    </div>
    <div class="bottom-footer">
        <div class="scale-bl">
            <a>100%</a>
            <a>90%</a>
            <a>75%</a>
            <a>50%</a>
            <a>25%</a>
            <a>10%</a>
            <a>5%</a>
        </div>
    </div>
    <div class="slide-menu"></div>
    <div class="properties-menu">
        <article class="info">
            <div class="info-title">基础信息</div>
            <div class="info-content">
                <input type="hidden" id="layout-id" />
                <table>
                    <tr>
                        <th style="width:50%">宽  度：</th>
                        <td style="width:50%"><input type="number" name="info-width" style="width:80px;" /></td>
                    </tr>
                    <tr>
                        <th style="width:50%">高  度：</th>
                        <td style="width:50%"><input type="number" name="info-height" style="width:80px;" /></td>
                    </tr>
                    <tr>
                        <th style="width:50%">X坐标：</th>
                        <td style="width:50%"><input type="number" name="info-x" style="width:80px;" /></td>
                    </tr>
                    <tr>
                        <th style="width:50%">Y坐标：</th>
                        <td style="width:50%"><input type="number" name="info-y" style="width:80px;" /></td>
                    </tr>
                </table>
            </div>
        </article>
        <article class="info">
            <div class="info-title">绑定数据</div>
            <div class="info-content" style="padding:10px;">
                设备：
                <input type="text" class="k-textbox" id="device-id" readonly="readonly" />
                <input type="hidden" class="k-textbox" id="device-id-value" />
                <div class="lonix float-frame float" id="device-tree">
                    <div class="lonix float-header">
                        <input type="text" class="lonix search-input" maxlength="15" placeholder="搜索" />
                    </div>
                    <div class="lonix float-body">
                        <ul class="ztree" id="device-tree-ul"></ul>
                    </div>
                    <div class="lonix float-prompt"></div>
                    <div class="lonix float-footer">
                        <div class="lonix button-group">
                            <button class="lonix button primary">确认</button>
                            <button class="lonix button cancel">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </div>
</section>
<script src="js/lonix/transition.min.js"></script>
<script src="js/lonix/lonix.downlist.js"></script>
<script src="js/lonix/dropdown.min.js"></script>
<script src="views/parkLotCenter/panelConfig/js/layout.js"></script>